<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编辑个人信息</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/style/front/css/base.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/style/front/css/style.css"/>
</head>

<body>
<div class="head-box">
    <div class="head wrap">
          <div class="logo fl"><a href=""><img src="${pageContext.request.contextPath}/static/style/front/images/logo.png"/></a></div>
          <div class="head-right fr">
              <div class="head-a fr">
                   <div class="hgt fl"><img src="${pageContext.request.contextPath}/static/style/front/images/hgt.png"/>
                         <div class="hgt-top">
                             <input type="text" class="hgt-text"/>
                         </div>
                   </div>                  
                   <div class="tbt fl"><img src="upload/ttt.png"/>
                        <div class="hgt-btm">
                             <a href="">我的主页</a>
                             <a href="">消息</a>
                             <a href="">我的关注</a>
                             <a href="">帐号设置</a>
                             <a href="">退出</a>
                        </div>
                   </div>           
              </div>
              <div class="clearfix"></div>
              <div class="nav fr">
                  <ul>
                       <li><a href="#">首页</a></li>
                       <li><a href="#">文章</a>
                           <div class="sub-nav">
                                <div class="bich-top"></div>
                                 <div class="bich">
                                     <a href="">服饰</a>
                                     <a href="">美食</a>
                                     <a href="">出行</a>
                                     <a href="">约会</a>
                                 </div>
                           
                           </div>
                       </li>
                       <li><a href="#">社区</a></li>
                       <li><a href="#">课程</a></li>
                       <li><a href="#">活动</a></li>
                       <li><a href="#">联系我们</a></li>
                  
                  </ul>
              </div>
              <div class="clearfix"></div>
          </div>
    </div>
</div>

<div class="content">
    <div class="wrap">
         <div class="tsm-height"></div>
         <div class="account">
         	<form action="${pageContext.request.contextPath}/edituser" method="post" enctype="multipart/form-data">
         	 <input id="id" name="id" type="hidden" value="${users.id}"/>
                 <div class="account-title">账户设置</div>
                 <div class="tsm-box">
                      <div class="tsm-title">个人资料
                      </div>
                      <div class="tsm-a" style="display:block;">
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">用户昵称：</div>
                                         <div class="tsm-a3"><input type="text" class="tsm-text1" name="nickname" value="${users.nickname}"/></div>
                                   </div>
                                   
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">性别：</div>
                                         <div class="tsm-a4">
                                             <input type="radio" checked="checked" name="sex" value="男" />男
                                             <input type="radio" name="sex" value="女" />女
                                         </div>
                                   </div>
                                   
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">职业：</div>
                                         <div class="tsm-a3"><input type="text" class="tsm-text1" name="profession" value="${users.profession}"/></div>
                                   </div>
                                   
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">邮箱：</div>
                                         <div class="tsm-a3"><input type="text" class="tsm-text1" name="email" value="${users.email}"/></div>
                                   </div>
                                              
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">个人简介：</div>
                                         <div class="tsm-a3"><input type="text" class="tsm-text1" name="introduction" value="${users.introduction}"/></div>
                                   </div> 
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">个人头像：</div>
                                         <div class="tsm-a3" style="height: 60px"><img style= "position:absolute;" width="50px" height="50px" src='${pageContext.request.contextPath}/${users.picture}' /></div>
                                         <div class="tsm-a3"><input type="file" name ="pictureFile" value="" /></div>
                                   </div>
                                                                                                      
                        </div>
                 </div>			
				<div class="tsm-href"><input type="submit" class="tsm-btn" value="保存"/></div>
            </form>     
         </div>
    </div>
 
</div>

<div class="footer">
   <div class="wrap">
      <div class="foot">
            <div class="foot-left fl">
                 <a href="">关于我们</a>
                 <a href="">加入我们</a>
                 <a href="contact.html">联系我们</a>
                 <a href="">媒体采访</a>
            </div>
            <div class="foot-c fl"><a href=""><img src="images/foot-logo.jpg"/></a></div>
            <div class="foot-right fr">
                 <a href="">同城活动</a>
                 <a href="">课程资讯</a>
                 <a href="">最新发布</a>
                 <a href="">热门文章</a>
            </div>
       </div> 
       <div class="foot-btm">高新出品</div>    
   </div>
</div>



<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/Action.js"></script>

<!--<script type="text/javascript">
                //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
          var MAXWIDTH  = 122; 
          var MAXHEIGHT = 122;
          var div = document.getElementById('preview');
          if (file.files && file.files[0])
          {
              div.innerHTML ='<img id=imghead>';
              var img = document.getElementById('imghead');
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                 
                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
             
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
</script> -->
</body>
</html>
